
<template>
    <el-date-picker
        v-model="date_range"
        clearable
        :type="typeRange"
        :default-value="new Date()"       
        :value-format="dateFormat"
        :size="inputSize"
        :disabled="isDisabled"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
        @change="changeDateRange">
	</el-date-picker>
</template>

<script lang="ts"  setup name="mydaterange">
import { ref, defineProps, computed, watch, onMounted } from "vue";
const emit = defineEmits(['update:start', 'update:end', 'change']);

const props = defineProps({
    start: [String, Object],
    end: [String, Object],
    type: {type: String, default: () => 'daterange'},
    size: {type: String, default: () => 'default'},
    isDisabled: {type: Boolean, default: () => false}
});
const startPlaceholder = ref('开始日期');
const endPlaceholder = ref('结束日期');
const typeRange = props.type;
const inputSize = props.size;
const dateFormat = ref('YYYY-MM-DD');
const dateRange = ref([]);

const init = () => {
    if(props.type == 'monthrange'){
        startPlaceholder.value = '开始月份';
        endPlaceholder.value = '结束月份';
        dateFormat.value = 'YYYY-MM';
    }else if(props.type == 'datetimerange'){
        dateFormat.value = 'YYYY-MM-DD HH:mm:ss';
    }
};

const startDate = computed(() => {
    return props.start;
});
const endDate = computed(() => {
    return props.end;
});
let date_range:any = computed({
    get(){
        return [props.start || '', props.end || '']
    },
    set(newVal){
        let arr_date : any;
        if(newVal){
            arr_date = newVal
        }else{
            arr_date = ['',''];
        }
        emit('update:start', arr_date[0]);
        emit('update:end', arr_date[1]);
        emit('change', arr_date);
    }
});
watch(
    startDate, (newVal, oldVal) =>{
        if(newVal){
            date_range[0] = newVal;
        }else{
            // date_range =['', '']
        }
    });
watch(
    endDate,(newVal, oldVal) =>{
        if(newVal){
            date_range[1] = newVal;
        }else{
            // date_range =['', '']
        }
    });
const changeDateRange = (val:any) => {
    console.log(val)
}

onMounted(() => {
    init();
});

</script>
